<template>
        <div class="product-confirm" :class='{"hide-product": flag}'>

                <h4 class="tit">
                    数量
                    <span class="v-closebtn" @click="changeFlag"></span>
                </h4>
                <div class="prdbox">
                    <img :src="ProductTitle.imageUrl"
                        class="v-img">
                    <div class="info">
                            <span class="num">¥{{skuPrice.currentPrice}}</span>
                            <span class="promotiontag">{{vipGoodsDiscountInfo.discount/10}}折</span>
                    </div>
                </div>
                <div class="cntbox">
    
                    <p class="propname">数量</p>
                    <div class="v-numberinput">
                        <div class="v-numberinput-minus  v-numberinput-disabled" @click="substractQuantity">
                            <div class="v-numberinput-minus-hotarea"></div>
                        </div>
                        <div class="v-numberinput-value">{{quantity}}</div>
                        <div class="v-numberinput-plus " @click="addQuantity">
                            <div class="v-numberinput-plus-hotarea"></div>
                        </div>
                    </div>
         
                </div>
                <div class="n-btnwrap" @click="addProductData">
                    <a class="btn-1  " href="javascript:;" >确认
                    </a>
                </div>
        </div>
       
</template>
<script>
   import { mapGetters }  from "vuex"
    export default {
        data(){
            return {
                quantity: 1,
                confirm: false
            }
        },
        props: [
            "flag",
            "changeFlag"
        ],
        methods: {
             
            addQuantity(){ 
                if(this.quantity<99 && this.quantity>0){
                    this.quantity ++
      
                }
  
            },
            substractQuantity(){
                if(this.quantity<100 && this.quantity>1){
                    this.quantity --
                }
  
            },
            addProductData(){
                console.log(this)
                
                this.$parent.flag = true
                // debugger
                // this.flag = true
                let productArr = {}
                let ProductTitle = this.$store.getters['ProductList/ProductTitle']
                let currentPrice = this.$store.getters['ProductList/skuPrice'].currentPrice
                let goodsId = this.$store.getters['ProductList/goodsId']
        
                productArr.goodsId = goodsId;
                productArr.currentPrice= currentPrice;
                productArr.title = ProductTitle.title;
                productArr.quantity = this.quantity;
                productArr.imageUrl = ProductTitle.imageUrl;
                

                if(ProductTitle && currentPrice && goodsId && productArr.title && productArr.imageUrl){
                    this.$store.dispatch("INCREMENTSHOPCART",productArr)
                }
                

                
            },
            // changeConfirm(){
            //     this.confirm = !this.confirm
            //     console.log("this.confrim",this.confirm)
                
            // },
        },
        computed: {
            ...mapGetters("ProductList",[
                "skuPrice","vipLayoutInfo","ProductTitle","vipGoodsDiscountInfo"
             ]),
             

        }
    }
</script>



<style lang="stylus" scoped>
         .product-confirm

            width 100%
            position absolute
            bottom 0
            left 0
            background: #fffcfc
            border-top: 1px solid #ddd
            z-index 1000
            // transform translateY(100%)
            animation: slideup .2s cubic-bezier(.2,.13,0,.97)
            transition transform 2s
            &.hide-product
                display none
            &.hide-confrim
                display none
            //    animation  slidedown .2s cubic-bezier(.2,.13,0,.97)
                
            .tit

                width 100%
                height .44rem
                font-weight 400
                line-height .44rem
                background #fcf9f8
                font-size .14rem
                color #000
                padding 0 .1rem
                border-bottom: 1px solid #ddd
                .v-closebtn
                    position absolute
                    width .35rem
                    height .45rem
                    top 2px
                    right .04rem
                    background url(//haitao.nosdn1.127.net/1494405694654producticon.png) no-repeat -.30rem -.98rem
                    background-size: 2rem
            .prdbox
                padding .1rem .1rem 0
                display flex
                img 
                    height .75rem
                    width .75rem
                .info
                    flex 1
                    height .16rem
                    line-height .16ren
                    color #e31436
                    .num
                        display inline-block
                        margin-right .06rem
                    .promotiontag
                        display inline-block
                        background #e31436
                        font-size .11rem
                        color #fff
                        padding 0 .03rem 0.01rem 
            .cntbox
                height .8rem
                margin .1rem .1rem .15rem
                .propname
                    height .4rem
                    line-height .4rem
                    font-size .14rem
                    color #999
                .v-numberinput
                    display flex
                    width 1.2rem
                    border 1px solid #aaa
                    border-radius .02rem
                    overflow hidden
                    .v-numberinput-minus
                        display flex
                        width .35rem
                        height .30rem
                        position relative
                        border-right 1px solid #aaa
                        &:before
                            position absolute
                            top 50%
                            left 50%
                            -webkit-transform translate3d(-50%,-50%,0)
                            transform translate3d(-50%,-50%,0)
                            content ""
                            display block
                            width .14rem
                            height .02rem
                            background #ccc
                        &.substract-color
                            &:before   
                                color: #000 

                        .v-numberinput-minus-hotarea
                            position absolute
                            top 50%
                            left 50%
                            width .37rem
                            height .37rem
                            transform translate3d(-50%,-50%,0)
                            box-sizing border-box
                    .v-numberinput-value
                        min-width .48rem
                        line-height .3rem
                        text-align center
                        font-weight 700
                    .v-numberinput-plus
                            width .35rem
                            height .3rem
                            position relative
                            border-left 1px solid #aaa
                            &:before
                                position absolute
                                top 50%
                                left 50%
                                transform translate3d(-50%,-50%,0)
                                content ""
                                display block
                                background-color #666
                                width .14rem
                                height .02rem
                            &:after
                                position absolute
                                top 50%
                                left 50%
                                width .02rem
                                height .14rem
                                transform translate3d(-50%,-50%,0)
                                content ""
                                display block
                                background-color #666
            .n-btnwrap
                width 100%
                height .5rem
                .btn-1
                    display inline-block
                    background #404040
                    color #fff
                    width 100%
                    height 100%
                    font-size .15rem
                    line-height .5rem
                    text-align center
                    &:hover
                        text-decoration none
</style>